<template>
	<view class="eventDetails">
		<view class="eventDetails_content">
			<view style="background: #fff;border-radius: 10rpx;box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);position: relative;">
				<view class="eventDetails_content_title">
					{{activitData.activityName}}
				</view>
				<!-- 2-已发布 3-已中止 4-已结束 -->
				<view class="activityIng" v-if="activitData.activityStatus == '2' || activitData.activityStatus == '3' || activitData.activityStatus == '4'">
					<text class="trigon"></text>
					<view class="activityIng_content">
						{{ activitData.activityStatus == '2' ? '已发布' : (activitData.activityStatus == '3' ? '已中止' :'已结束') }}
					</view>
				</view>
				
				<view class="mainPushCar">
					<view class="mainPushCar_content">
						主推车系：{{ activitData.modelNames }}
					</view>
				</view>
				<view class="group">
					<view class="group_content">
						活动类型：{{activitData.activityDivision}}/{{activitData.activityType}}
					</view>
				</view>
				<view class="activityTime">
					<view class="activityTime_content">
						活动时间：{{activitData.startTime | getDateTime}}  -  {{activitData.endTime | getDateTime}}
					</view>
				</view>
			</view>
		</view>
		<view class="adviser_contribution">
			<view class="adviser_contribution_title">
				销售顾问贡献
			</view>
			<!-- <view class="legend_box">
				<view class="legend">
					<text class="legend_block one" ></text>成交
				</view>
				<view class="legend">
					<text class="legend_block two"></text>订单
				</view>
				<view class="legend">
					<text class="legend_block three"></text>加热线索
				</view>
				<view class="legend">
					<text class="legend_block four"></text>新增线索
				</view>
				<view class="legend">
					<text class="legend_block five"></text>参与
				</view>
				<view class="legend">
					<text class="legend_block six"></text>邀约
				</view>
			</view> -->
			<view class="qiun-charts">
				<!-- <canvas canvas-id="canvasColumnStack" id="canvasColumnStack" class="charts" disable-scroll=true @touchstart="touchColumn"
				 @touchmove="moveColumn" @touchend="touchEndColumn"></canvas> -->
				 <e-charts :option="activityDetailCharts" style="height: 590rpx;"></e-charts>
			</view>

		</view>
	</view>
</template>

<script>
	// import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	import eCharts from'@/components/echarts/echarts.vue'
	import {
		getActivityInfo,
		getAppActivities,
		getTotals
	} from '@/service/api/api.js';
	// import {
	// 	parseTime,
	// } from '@/common/util.js';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	
	var canvaColumn = null;
	export default {
		props: {
			// clueId: {
			// 	type: String,
			// 	default: ''
			// }
		},
		components: {
			uniIcons,
			eCharts
		},
		filters: {
			// dataFormat(val) {
			// 	return parseTime(val, '{y}-{m}-{d} {h}:{i}')
			// },
			getDateTime(val){
				if(val){
					return val.split('T')[0]
				}else{
					return ''
				}
			}
		},
		data() {
			return {
				userInfo: {},
				activityId: '',
				activitData: {},
				activityDetailCharts:{},
				chartData: {
					// "categories": ["张三", "李四"],
					// "series": [{
					// 	"name": "成交",
					// 	"data": [35, 36]
					// }, {
					// 	"name": "参与",
					// 	"data": [18, 24]
					// }, {
					// 	"name": "新增线索",
					// 	"data": [21, 24]
					// },{
					// 	"name": "加热线索",
					// 	"data": [35, 36]
					// }, {
					// 	"name": "订单",
					// 	"data": [18, 24]
					// }, {
					// 	"name": "成交",
					// 	"data": [21, 24]
					// }]
				}
			}
		},
		computed: {
			
		},
		
		onLoad(option) {
		
			this.activityId = option.activityId || ''
			// || 'ACT000001'
			this.init()
		},
		methods: {
			labelFormatter (params) {
				 if (params.value > 0) {
				   return params.value;
				 } else {
				   return '';
				 }
		    },
			init() {
				this.userInfo = uni.getStorageSync('user_info')
				this.getActivityInfoFun()
				this.getChartData()
			},
			
			async getActivityInfoFun(){
			  if (!this.activityId) return
			  let res= await getActivityInfo({ activityId:this.activityId })
			  if(res.data.code==0){
				// res.data.data.activityContent = res.data.data && res.data.data.activityContent ? res.data.data.activityContent.replace(/<img/g,"<img style='display:block;max-width:80%;height:auto;margin: 0 auto;'") : '';
				
				res.data.data.startTime = res.data.data && res.data.data.startTime ? res.data.data.startTime.substr(0, 10) : ''
				res.data.data.endTime = res.data.data && res.data.data.endTime ? res.data.data.endTime.substr(0, 10) : ''
				this.activitData = res.data.data
			  }
			  
			},
			
			getChartData(){
				getTotals({
					activityId: this.activityId
				}).then(res => {
				//	console.log(res)
					if(res.data.code == '0') {
						let resData = res.data.data
						let dataObj = {}
						// console.log(res,'res,res,res,res,res,')
						resData.forEach((item,idx) => {
							if(Object.keys(dataObj).indexOf(item.salesmanName) == -1) {
								dataObj[item.salesmanName] = item
							} else {
								let x = dataObj[item.salesmanName]
								x.activityInviteCount += item.activityInviteCount
								x.signUpCount += item.signUpCount
								x.addClueCount += item.addClueCount
								x.existClueCount += item.existClueCount
								x.orderCount += item.orderCount
								x.orderDealCount += item.orderDealCount
							}
						})
						
						let seriesArr = [
							{
								name: '邀约',
								type:'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: [],
								label:{
									show: false
								}
							}, 
							{
								name: '参与',
								type:'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: [],
								label:{
									show: false
								}
							}, {
								name: '新增线索',
								type:'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: [],
								label:{
									show: false
								}
							}, {
								name: '加热线索',
								type:'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: [],
								label:{
									show: false
								}
							}, {
								name: '订单',
								type:'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: [],
								label:{
									show: false
								}
							}, {
								name: '成交',
								type:'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: [],
								label: {
									show: false
								  }
							},
							{
								name:'合计',
								type:'bar',
								stack:'total',
								show:true,
								 barMinHeight:'20',
								 barMaxHeight:'20',
								itemStyle:{						
									opacity:'0',							
								},
								label: {
									show: true,
									stack: 'total',
									offset:[0,0],
									align: 'left',
									opacity:'1'		
								},
								'data':[]  
							}]
						var fun = function (params) {
							var datavalue = 0;
							for (var i = 0; i < seriesArr.length; i++) {
								datavalue += seriesArr[i].data[params.dataIndex]
							  }
							  return datavalue;
						}
						seriesArr[seriesArr.length - 1]["label"]["formatter"] = fun;
						
						Object.values(dataObj).forEach((item, idx) => {
							seriesArr['0'].data.push(item.activityInviteCount || '')
							seriesArr['1'].data.push(item.signUpCount || '')
							seriesArr['2'].data.push(item.addClueCount || '')
							seriesArr['3'].data.push(item.existClueCount || '')
							seriesArr['4'].data.push(item.orderCount || '')
							seriesArr['5'].data.push(item.orderDealCount || '')
							let num=item.activityInviteCount+item.signUpCount+item.addClueCount+item.existClueCount+item.orderCount+item.orderDealCount;
							seriesArr['6'].data.push(num)	
						})

						this.chartData = {
							categories: Object.keys(dataObj) || [],
							series: seriesArr
						}
						this.showCharts(this.chartData)
					}
					
				})
			},
			showCharts(data){
				this.activityDetailCharts={
					 color:['#61A2FC','#57CBFD','#56D6AA', '#F5D568', '#FA832B','#F86666',],
					 tooltip: {
					        trigger: 'axis',
					        axisPointer: {            // Use axis to trigger tooltip
					            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
					        },
							// formatter:(data)=> {
							// 	var res = ''
							// 	var sum = 0
							// 	data.forEach((item,index) => {
							// 	  sum += item.value
							// 	  console.log()
							// 	  res+=item.marker
							// 	  res += `${item.seriesName} : ${item.value} \n`
							// 	  if(index==data.length-1) {
							// 		res += `合计 : ${sum}`
							// 	  }
							// 	})
							// 	return res
							//   }
					    },
					    legend: {
					        data: ['邀约','参与','新增线索','加热线索','订单','成交'],
							left:"0",
							icon: "circle",
							itemGap: 5,
							itemWith:6,
							itemHeight:6,
							textStyle:{
								fontSize:'10',
								padding:[0,-5]
							}
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type: 'value',
							position:'top'
					    },
					    yAxis: {
					        type: 'category',
					        data: data.categories,
							axisLine: {show:false}
					    },
					    series: data.series
				}
			}
		}
	}
</script>


<style scoped lang="scss">
	@import './index.scss';
	.qiun-charts {
		padding: 20rpx 30rpx;
	}
</style>
